// 收款账户明细
import { editRechargeAccountInfo, getCollectionAccountList } from '@/api/company'
import type { CollectionAccountDto, CollectionAccountReqDto } from '@/api/company/types'
import renderModal, { getModelValue, initModelValue, renderForm, type FormModalDto } from '@/components/modal/Modal'
import { CollectionAccountStatusCnEnum, CollectionAccountTypeCnEnum, getKeyToEnum, PayModeCnEnum, ProductTypeCnEnum } from '@/const/enum'
import type { FilterDto } from '@/render/FilterRender'
import TableRender, { type TableRenderColumnTypes } from '@/render/TableRender'
import type { AnyObject } from '@/types'
import toNative from '@/utils/toNative'
import { getReceiptData } from '@/utils/util'
import { Button, message } from 'ant-design-vue'
import { Component } from 'vue-facing-decorator'
import DialogExport from './components/DialigExport'

@Component
export class Recharge extends TableRender {
    curRow = {} as CollectionAccountDto

    showExport = false

    filterConfig(): FilterDto {
        return {
            companyId: {
                name: '客户名称',
                element: 'select',
                optionsType: 'company'
            },
            productType: {
                name: '产品类型',
                element: 'select',
                options: getKeyToEnum(ProductTypeCnEnum)
            },
            status: {
                name: '状态',
                element: 'select',
                options: getKeyToEnum(CollectionAccountStatusCnEnum)
            },
            rechargeTime: {
                name: '充值时间',
                element: 'rangePicker',
            }
        }
    }

    tableColumnConfigOld = () =>
        [
            {
                field: 'operate',
                title: '操作',
                widht: 80,
                fixed: 'left',
                params: {
                    buttons: [
                        {
                            text: '编辑',
                            event: (row) => this.onEdit(row)
                        }
                    ]
                },
                slots: {
                    default: 'buttons'
                }
            },
            {
                field: 'companyName',
                title: '客户名称',
                width: 200
            },
            {
                field: 'productType',
                title: '产品类型',
                formatter: ({row}) => {
                    return ProductTypeCnEnum[row.productType]
                }
            },
            {
                field: 'operateAmount',
                title: '充值金额',
                slots: {
                    default: 'price'
                }
            },
            {
                field: 'payMode',
                title: '充值方式',
                formatter: ({row}) => {
                    return PayModeCnEnum[row.payMode]
                }
            },
            {
                field: 'status',
                title: '充值状态',
                formatter: ({row}) => {
                    return CollectionAccountStatusCnEnum[row.status]
                },
                params: {
                    colors: {
                        0: 'blue-200',
                        1: 'green',
                        2: 'red',
                    }
                },
                slots: {
                    default: 'status'
                }
            },
            {
                field: 'createTime',
                title: '充值时间',
                width: 160
            },
            {
                field: 'remark',
                title: '备注',
            },
            {
                field: 'bankName',
                title: '收款账户',
            },
            {
                field: 'channelName',
                title: '渠道信息',
            },
            {
                field: 'voucherUrl',
                title: '充值凭证',
                params: {
                    srcList: (row) => row.voucherUrl ? [row.voucherUrl] : []
                },
                slots: {
                    default: 'preview'
                }
            },
            {
                field: 'accountExpireTime',
                title: '到期时间',
                width: 140,
                slots: {
                    default: 'dateformat'
                }
            },

        ] as TableRenderColumnTypes<CollectionAccountDto>


    basicFormConfig = this.initBasicFormConfig() as FormModalDto
    initBasicFormConfig() {
        return {
            title: '修改信息',
            width: '400px',
            theme: 'light',
            show: false,
            noPadding: true,
            items: {
                remark: {
                    name: '备注',
                    element: 'input',
                    required: true
                },
                channelId: {
                    name: '渠道信息',
                    element: 'select',
                    required: true,
                    optionsType: 'channel',
                    callback: {
                        change: async(channelId: number) => {
                            this.basicFormConfig.items.receiptId.value = ''
                            this.basicFormConfig.items.receiptId.options = await getReceiptData(channelId)
                        }
                    }
                },
                receiptId: {
                    name: '收款账户',
                    element: 'select',
                    required: true,
                    options: []
                },
                payMode: {
                    name: '充值方式',
                    element: 'select',
                    required: true,
                    options: getKeyToEnum(PayModeCnEnum)
                },
            },
            complete: async () => {
                const data = getModelValue(this.basicFormConfig)
                await editRechargeAccountInfo({
                    id: this.curRow.id,
                    payMode: data.payMode,
                    productType: this.curRow.productType,
                    receiptId: data.receiptId,
                    remark: data.remark
                })
                message.success('修改成功')
                this.basicFormConfig.show = false
                this.reloadPage()
            },
            cancel: () => {
                this.basicFormConfig.show = false
            },
            init: () => {
                initModelValue(this.basicFormConfig)
            }
        } as FormModalDto
    }

    getParams() {
        const params = this.getFilters()
        params.position = 1
        params.selectType = CollectionAccountTypeCnEnum.充值
        params.startTime = params.rechargeTime?.[0]
        params.endTime = params.rechargeTime?.[1]
        delete params.rechargeTime
        return params as CollectionAccountReqDto
    }

    async onEdit (row: CollectionAccountDto) {
        this.curRow = row
        this.basicFormConfig.show = true
        if (row.channelId) {
            this.basicFormConfig.items.receiptId.options = await getReceiptData(row.channelId)
        }
        initModelValue(this.basicFormConfig, row)
    }

    onLoadData(pageNum: number, pageSize: number, filters: AnyObject) {
        filters.startTime = filters.rechargeTime?.[0]
        filters.endTime = filters.rechargeTime?.[1]
        delete filters.rechargeTime
        return getCollectionAccountList({
            pageNum,
            pageSize,
            ...this.getParams()
        })
    }

    renderRightBtns() {
        return <>
            <Button onClick={() => {
                this.showExport = true
            }}>导出</Button>
        </>
    }

    render() {
        return <>
            {super.render()}
            {renderModal(this.basicFormConfig)}
            <DialogExport v-model:show={this.showExport} params={this.getParams()} />
        </>
    }
}

export default toNative(Recharge)
